<template>
  <div class="top">
      <div class="navigation posi-rel">
        <!-- 1. logo -->
          <h1 class="logo">
              <a href="/"></a>
          </h1>
          <!-- 2.导航 -->
          <el-menu
            :default-active="this.$route.path"
            class="el-menu-demo"
            mode="horizontal"
            @select="handleSelect"
            background-color="#242424"
            text-color="#fff"
            active-text-color="#C10D0C">
            <el-menu-item index="/home">发现音乐</el-menu-item>
            <el-menu-item index="/leaderboard">排行榜</el-menu-item>
            <el-menu-item index="3">我的音乐</el-menu-item>
            <el-menu-item index="4">音乐人</el-menu-item>
          </el-menu>
          <!-- 3. 搜索框 -->
          <div class="search-box posi-rel fl ml50">
            <i class="el-icon-search"></i>
            <el-input class='search-input' v-model="searchData" placeholder="音乐/视频/电台/用户"></el-input>
          </div>
          <!-- 4. 登录 -->
          <div class="disinblock login-box fl ml20" v-show='!userid'>
               <el-link type="info" class="login-link disinblock"
                 @click="dialogVisible = true" >登录</el-link>
          </div>
          <login-dialog :dialog-visible='dialogVisible' @toogle='toogleDialog'></login-dialog>
          <!-- 5. 用户头像 -->
          <user-list v-show="userid"></user-list>
      </div>
  </div>
</template>

<script>
import loginDialog from '../../views/headerMain/loginDialog'
import userList from '../../views/headerMain/userList'
import { mapGetters } from 'vuex'
export default {
  name: 'headerMain',
  data () {
    return {
      searchData: '',
      dialogVisible: false,
      isLogin: false,
      userInfo: '',
      activeIndex: ''
    }
  },
  mounted() {
    this.activeIndex = this.$router.path
  },
  methods: {
    toogleDialog(showFlag, isLogin) {
      this.dialogVisible = showFlag
      this.isLogin = isLogin
    },
    routerToLeaderBoard() {
      this.$router.push({path:'/leaderboard'})
    },
    handleSelect(key) {
      this.$router.push({
        path: key,
        params: {data: 'query' }
      })
    }
  },
  watch: {
    isLogin(val) {
      console.log('isLogin:',val)
      if (val) {
        this.isLoginBtnShow = false
      }
    },
  },
  components: {
    loginDialog,
    userList
  },
  computed: {
     ...mapGetters([
      'userid',
      'avatar'
    ])
  }
}
</script>
<style scoped lang="less">
@headerWidth: 1100px;
@headerHeight: 70px;
 .top {
    width: 100%;
    min-width: @headerWidth;
    height: @headerHeight;
    background: #242424;
    .navigation {
        width: @headerWidth;
        min-width: 965px;
        height: 100%;
        margin: 0 auto;
        text-align: center;
        display: flex;
        align-items: center;
        .logo {
            float: left;
            background: url("../../assets/topbar.png") no-repeat 0 9999px;
            height: 100%;
            width: 176px;
            background-position: 0 0;
            a {
                display: inline-block;
                width: 100%;
                height: 100%;
            }
        }
        ul {
            height: 100%;
            float: left;
            list-style: none;
            li {
                float: left;
                height: 100%;
                vertical-align: middle;
                span {
                    display: inline-block;
                    height: 100%;
                    :hover {
                      background: #000;
                    }
                    &.active {
                      background: #000;
                    }
                }
                a {
                    display: inline-block;
                    height: 100%;
                    line-height: @headerHeight;
                    text-decoration: none;
                    color: white;
                    text-align: center;
                    padding: 0 19px;
                    font-size: 14px;
                    cursor: pointer;
                }
            }
        }
        .search-box {
          width: 160px;
          height: @headerHeight;
          .search-input {
            position: absolute;
            top: 50%;
            left: 0;
            transform: translateY(-50%);
            /deep/ .el-input__inner {
              height: 32px;
              font-size: 12px;
              border-radius: 15px;
              padding-left: 30px;
            }
          }
          i {
              position: absolute;
              top: 50%;
              left: 0;
              transform: translateY(-50%);
              color: #999;
              z-index: 999;
              font-weight: 600;
              margin-left: 10px;
          }
        }
        .login-box {
          width: 80px;
          height: @headerHeight;
          text-align: center;
          .login-link {
              top: 50%;
              transform: translateY(-70%);
          }
        }
    }
 }
 /deep/.el-menu--horizontal>.el-menu-item {
   line-height: 70px;
 }
 /deep/.el-menu.el-menu--horizontal {
   border-bottom: none;
 }
</style>
